<script>

import Header from "../../components/HeaderVue.vue";
import {reactive, ref} from "vue";
import {Plus, UploadFilled} from "@element-plus/icons-vue";
import {addVideo, aiCheckVideo} from "../../../api/video/UploadVideo.js";
import {ElNotification} from "element-plus";

export default {
  name: "UploadVideo",
  components: {
    UploadFilled,
    Plus,
    Header,
  },
  setup() {
    /*-----------------变量----------------*/
    // 视频表单
    let videoForm = reactive({
      title: '',
      cover: '',
      description: '',
      source: '',
      tag: '',
    });
    // 是否显示预览图
    let previewDialogVisible = ref(false);
    // 当前添加的视频标签列表
    let videoTags = ref([]);
    // 用户输入的视频标签
    let nowVideoTag = ref();
    /*-----------------常规方法-------------*/
    function addVideoTag() {
      videoTags.value.push({
        tag: nowVideoTag.value,
        color: getColor(),
      });
      nowVideoTag.value = '';
    }
    function deleteVideoTag(tag) {
      videoTags.value.splice(videoTags.value.indexOf(tag), 1);
    }
    function getColor() {
      var str = "#";
      //一个十六进制的值的数组
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      for (var i = 0; i < 6; i++) {
        //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
        var num = parseInt(Math.random() * 16);
        str += arr[num];
      }
      return str;
    }
    function handleUploadVideo(file) {
      videoForm.source = file.data
      aiCheckVideo(videoForm).then(response=> {
        // 由ai审查视频是否合规 如果ai审查未通过
        if ( response.data !== 'pass' ) {
          ElNotification({
            title: 'Error',
            message: '视频审查未通过，请检查视频是否符合规范！',
            type: 'error',
          })
          videoForm.source = '';
        }
      })
    }
    function handleUploadCover(file) {
      videoForm.cover = file.data
    }
    /*-----------------请求方法-------------*/
    function submitForm() {
      let tagStr = "";
      videoTags.value.forEach(item => {
        tagStr = tagStr + item.tag + ",";
      });
      videoForm.tag = tagStr;
      addVideo(videoForm).then(response=> {
        ElNotification({
          title: 'Success',
          message: '上传视频成功！',
          type: 'success',
        })
      });
      videoForm.cover = '';
      videoForm.tag = '';
      videoForm.description = '';
      videoForm.title = '';
      videoForm.source = '';
      nowVideoTag = '';
    }
    return {
      videoForm,
      previewDialogVisible,
      videoTags,
      nowVideoTag,
      addVideoTag,
      deleteVideoTag,
      submitForm,
      handleUploadVideo,
      handleUploadCover,
    }
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <div class="fix-header">
        <el-header class="header-outer">
          <Header></Header>
        </el-header>
      </div>
      <el-main>
        <div class="main-box">
          <el-card class="uploadVideo">
            <el-upload
                class="upload-demo"
                drag
                :on-success="handleUploadVideo"
                action="/api/video/uploadFile"
                multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                拖拽或者 <em>点击以上传视频文件</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  文件大小不超过 10GB
                </div>
              </template>
            </el-upload>
          </el-card>
          <el-card class="customer-area">
            <el-form
                :label-position="'left'"
                label-width="auto"
                :model="videoForm"
                style="max-width: 600px"
            >
              <div class="title">
                <span class="label" style="width: 120px">基本设置</span>
              </div>
              <el-form-item label="封面" class="cover">
                <el-upload action="/api/video/uploadFile" list-type="picture-card" style="margin-left: 90px" :on-success="handleUploadCover">
                  <el-icon><Plus /></el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    </div>
                  </template>
                </el-upload>

                <el-dialog v-model="previewDialogVisible">
                  <img w-full :src="videoForm.cover" alt="Preview Image" />
                </el-dialog>
              </el-form-item>
              <el-form-item label="标题">
                <el-input size="large" maxlength="80" show-word-limit type="text" v-model="videoForm.title" placeholder="请输入标题" style="margin-left: 90px"></el-input>
              </el-form-item>
              <el-form-item label="标签">
                <div style="margin-left: 90px;width: 500px">
                  <el-input size="large" v-model="nowVideoTag" placeholder="请输入标签内容，按下Enter键以添加标签" @keydown.enter="addVideoTag"></el-input>
                    <el-tag round effect="dark" type="success">当前标签：</el-tag>
                    <el-tag :color="item.color" v-for="(item,index) in videoTags" :key="index" style="margin-left: 5px" closable round effect="dark" @close="deleteVideoTag(tag)">{{item.tag}}</el-tag>
                </div>
              </el-form-item>
              <el-form-item label="简介">
                <el-input maxlength="200" show-word-limit v-model="videoForm.description" type="textarea" :rows="3" placeholder="请输入简介" resize='none' style="margin-left: 90px"></el-input>
              </el-form-item>
              <div style="margin-left: 130px">
                <el-button type="primary" @click="submitForm">立即投稿</el-button>
                <el-button>重置</el-button>
              </div>
            </el-form>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.common-layout {
  .fix-header {
    position: fixed;
    //top: 0;
    width: 100%;
    z-index: 900;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,0.1);
    .header-outer {
      height: 100%;
      // 改变盒子背景 略灰一点
      background-color: #fff;
      // 改变外部盒子边界线便于区分
      border-bottom: 2px solid #eee;
      // 设置盒子底部阴影
      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }
  }
  .main-box {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    .uploadVideo {
      margin-top: 100px;
    }
    .customer-area {
      margin-top: 20px;
      .title {
        margin: 0 0 0 32px;
        font-size: 16px;
        font-weight: 600;
        color: #222;
        line-height: 22px;
        .label {
          display: inline-block
        }
        .quick-fill-entrance {
          position: relative;
          font-size: 12px;
          color: #61666d;
          font-weight: 400;
          cursor: pointer;
          border: 1px solid #e3e5e7;
          border-radius: 4px;
          padding: 6px 16px;
        }
      }
      .cover {
        color: #212121;
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}
</style>